<div class="login-container">
    <!-- <div style="z-index: 2;position: fixed;top: 0;left: 0">
        <button nz-button nzType="danger" routerLink="/previews">进入previews模块</button>
    </div> -->
    <!--<div class="login-bg-section skin-bgc"></div>-->
    <div class="login-content">

        <div class="login-title skin-color">
            生态监测平台
        </div>
        <form nz-form class="login-form" [formGroup]="loginForm" (ngSubmit)="submitForm()" *ngIf="!loginByPhone">
            <nz-form-item>
                <nz-form-control>
                    <nz-input-group [nzPrefix]="prefixUser" [nzSize]="'large'">
                        <input type="text" nz-input formControlName="username" placeholder="请输入用户名称" autofocus>
                    </nz-input-group>
                    <nz-form-explain
                        *ngIf="loginForm.get('username').dirty && loginForm.get('username').hasError('required')">
                        请输入用户名
                    </nz-form-explain>
                </nz-form-control>
            </nz-form-item>

            <nz-form-item>
                <nz-form-control>
                    <nz-input-group [nzPrefix]="prefixLock" [nzSize]="'large'">
                        <input nz-input type="password" formControlName="password" placeholder="请输入登陆密码">
                    </nz-input-group>
                    <nz-form-explain
                        *ngIf="loginForm.get('password').dirty && loginForm.get('password').hasError('required')">
                        请输入密码
                    </nz-form-explain>
                </nz-form-control>
            </nz-form-item>

            <!-- <nz-form-item>
                <nz-form-control>
                    <kylin-verification-code #verificationCode formControlName="validCode"></kylin-verification-code>
                    <nz-form-explain
                        *ngIf="loginForm.get('validCode').dirty && loginForm.get('validCode').hasError('required')">
                        请输入验证码
                    </nz-form-explain>
                </nz-form-control>
            </nz-form-item> -->

            <nz-form-item>
                <nz-form-control>
                    <!--                    <a routerLink="/register">注册账号</a>-->
                    <!--                    <nz-divider nzType="vertical"></nz-divider>-->
                    <!--                    <a (click)="loginByPhone = true">手机登陆</a>-->
                    <button nz-button nzType="primary" nzSize="large" [nzLoading]="loading" class="login-button">登陆
                    </button>
                </nz-form-control>
            </nz-form-item>
            <!-- <nz-form-item>
                <nz-form-control>
                    <button nz-button nzType="primary" nzSize="large" [nzLoading]="loading" class="login-button"
                            routerLink="/home">直接登陆
                    </button>
                </nz-form-control>
            </nz-form-item> -->
        </form>
        <kylin-phone-login *ngIf="loginByPhone" [(loginByPhone)]="loginByPhone" [successHandler]="handleLoginSuccess">
        </kylin-phone-login>
    </div>

    <ng-template #prefixUser>
        <kylin-icon icon="user" class="login-form-icon"></kylin-icon>
    </ng-template>
    <ng-template #prefixLock>
        <kylin-icon icon="lock" class="login-form-icon"></kylin-icon>
    </ng-template>
</div>
